import React from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { apiPrefix } from 'shared/api';
import './index.less';

export default class Home extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      contract: [],
    };
  }

  componentDidMount() {
    const api = `${apiPrefix}api/v1/contract/periods`;
    axios.get(api)
      .then((response) => {
        // console.log(response.data);
        this.setState({ contract: response.data.data });
        console.log(this.state.contract);
      });
  }
  render() {
    const contractList = this.state.contract;
    // console.log(`contractList${contractList}`);
    return (
      <div className="content">
        <div>
          <h3>合同期限管理</h3>
          <div className="contractTable">
            <table>
              <thead>
                <tr>
                  <th className="w50">序号</th>
                  <th className="w430">名称</th>
                  <th className="w120">月份数</th>
                  <th className="w430">描述/备注</th>
                  <th className="w120">
                    <Link to="/Contract/ContractDeadline/ContractDeadlineForm" className="addButton">添加</Link>
                  </th>
                </tr>
              </thead>
              <tbody>
                {
              contractList.map((value, index) => (
                <tr key={index}>
                  <td>{index + 1}</td>
                  <td>{value.name}</td>
                  <td>{value.amount}</td>
                  <td>{value.descr}</td>
                  <td>
                    <Link className="sure-button" to={`/Contract/ContractDeadline/ContractDeadlineForm/${value.id}`}>编辑</Link>
                  </td>
                </tr>
                ))
              }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}
